<template>
  <div class="root">
    <el-card shadow="never">
      <div class="titleBox">实名认证</div>
      <div class="formBox">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <div class="formList">
            <el-form-item label="真实姓名：" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：" prop="idNumber">
              <el-input v-model="form.idNumber" placeholder="请输入"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="身份证正面：">
            <!-- <el-upload
              :action="action + '/common/upload/file'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
            >
              <div class="cententBox" v-if="!form.idCardFront">
                <img
                  src="@/static/Imgs/userImg/shangchuan.png"
                  class="uploadImg"
                  alt=""
                />
                <div>上传图片</div>
              </div>
              <div class="cententBox" v-else>
                <img
                  style="width: 1.48rem; height: 1.48rem"
                  :src="form.idCardFront"
                  alt=""
                />
              </div>
            </el-upload> -->
            <div class="cententBox">
              <img
                style="width: 1.48rem; height: 1.48rem"
                :src="form.idCardFront"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item label="身份证反面：">
            <!-- <el-upload
              :action="action + '/common/upload/file'"
              :show-file-list="false"
              :on-success="handleAvatarSuccessB"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
            >
              <div class="cententBox" v-if="!form.idCardBack">
                <img
                  src="@/static/Imgs/userImg/shangchuan.png"
                  class="uploadImg"
                  alt=""
                />
                <div>上传图片</div>
              </div>
              <div class="cententBox" v-else>
                <img
                  style="width: 1.48rem; height: 1.48rem"
                  :src="form.idCardBack"
                  alt=""
                />
              </div>
            </el-upload> -->
            <div class="cententBox">
              <img
                style="width: 1.48rem; height: 1.48rem"
                :src="form.idCardBack"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item label="营业执照：">
            <!-- <el-upload
              :action="action + '/common/upload/file'"
              :show-file-list="false"
              :on-success="handleAvatarSuccessC"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
            >
              <div class="cententBox" v-if="!form.businessLicense">
                <img
                  src="@/static/Imgs/userImg/shangchuan.png"
                  class="uploadImg"
                  alt=""
                />
                <div>上传图片</div>
              </div>
              <div class="cententBox" v-else>
                <img
                  style="width: 1.48rem; height: 1.48rem"
                  :src="form.businessLicense"
                  alt=""
                />
              </div>
            </el-upload> -->
            <div class="cententBox">
              <img
                style="width: 1.48rem; height: 1.48rem"
                :src="form.businessLicense"
                alt=""
              />
            </div>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="">
            <div style="display: flex">
              <div
                class="redBtn"
                @click="realNameAuthentication"
              >
                提交申请
              </div>
              <div
                class="redBtn"
                style="margin-left: 10px"
                @click="$router.back()"
              >
                返回
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
          
          <script>
import { realNameAuthentication } from "@/api/shopMange";
import { getUserData } from "@/api/user";
import imgPath from "@/utils/config";
export default {
  data() {
    return {
      form: {},
      scData: [],
      action: "",
      rules: {
        idNumber: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          {
            pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的证件号",
            trigger: "blur",
          },
        ],
        realName:[
        { required: true, message: "请输入真实姓名", trigger: "blur" },
        ]
      },
    };
  },

  created() {
    this.action = imgPath.imgPath;
    this.getUserData();
  },
  methods: {
   
    //实名认证
    realNameAuthentication() {
      this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.memberId = this.form.id;
      realNameAuthentication(this.form).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "提交成功，等待后台审核",
            type: "success",
          });
          this.$router.back();
        }
      });
          } else {
            return false;
          }
        });
   
    },
    //上传二维码
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.idCardFront = res.data;
    },
    handleAvatarSuccessB(res, file) {
      console.log(res);
      this.form.idCardBack = res.data;
    },
    handleAvatarSuccessC(res, file) {
      console.log(res);
      this.form.businessLicense = res.data;
    },
    //图片校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 3MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      this.loading = true;
      return true;
    },
    //获取个人信息
    getUserData() {
      getUserData().then((res) => {
        this.form = res.data;
      });
    },
  },
};
</script>
          
          <style scoped lang="scss">
.root {
  .titleBox {
    font-size: 0.2rem;
    font-weight: 700;
  }

  .formBox {
    margin-top: 0.2rem;
    .formList {
      display: flex;
      align-items: center;
      .textBox {
        color: #a7adb8;
        font-size: 0.12rem;
      }
    }
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 0.2rem;
      width: 30%;
    }
    /deep/ .el-input__inner {
      background-color: #f5f7f9;
      border: 1px solid #e8e8e8;
    }
    /deep/ .el-input {
      width: 3rem;
    }
    .uploadImg {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem 0;
      margin-top: 0.3rem;
    }
    .cententBox {
      color: #999999;
    }
    /deep/ .el-upload--picture-card {
      line-height: 0;
    }
    .redBtn {
      width: 0.9rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #e22a1f;
      color: #fff;
      border-radius: 20px;
      text-align: center;
      margin-left: 0.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
          
          